<template>
  <div>
    <van-overlay :show="show" @click="show = false">
      <div style="width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;">
        <div style="background: #fff; padding: 0.5rem;">
          <div ref="captureArea" >
            <div id="erweimadiv" @click.stop="yulantu = true"></div>
          </div>
          <div class="flex" style="display:flex;justify-content: space-between; margin-top: 0.6rem;">
            <div
              style="width: 2.6rem; height: 0.8rem; font-size: 14px; background: #E4EDFF;  cursor: pointer; color: #005AFF; border-radius: 0.4rem;"
              class="flexcc" @click.stop="yulantu = true">保存照片</div>
            <div
              style="width: 2.6rem; height: 0.8rem; font-size: 14px; background:#005AFF; color: white; cursor: pointer; border-radius: 0.4rem;"
              class="flexcc" @click.stop="fuzhi">复制链接</div>
          </div>
        </div>

      </div>

    </van-overlay>
      <van-popup v-model="yulantu" position="center" style="width: 100%; background: transparent;">
        <div style="width: 6.5rem; margin: 0 auto; padding: 0.5rem; background: #fff;">
          <img :src="link" style="width: 100%;">
        </div>

      </van-popup>
  </div>
</template>

<script>
  import html2canvas from 'html2canvas'
  import QRCode from 'qrcodejs2'

  export default {
    props: ['item'],
    data() {
      return {
        yulantu:false,
        all: "",
        show: true,
        link: "",
        url:""
      }
    },
    created() {

    },
    mounted() {
      console.log(this.item)
      this.show = true
      let p0 = new Promise((res, rej) => {
        this.$nextTick(()=>{

          if(this.item.inv_code){
            this.url = `https://wx.jianzhiwz.top/api/game/jump?inv_code=${this.item.inv_code}`
          }else{
            // var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?';
            // url += 'appid=wxddcfde267c9679f5';
            // url += '&redirect_uri=' + encodeURIComponent('https://wx.jianzhiwz.top/h5/index?user_invs='+this.item.user_inv);
            // url += '&response_type=code';
            // url += '&scope=snsapi_userinfo';
            // this.url  = url
            this.url = 'https://wx.jianzhiwz.top/h5/index?user_inv='+this.item.user_inv
          }
          console.log(this.url)
          var qrcode = new QRCode(document.getElementById('erweimadiv'), {
            text: this.url,
            width: 300,
            height: 300,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
          })
        })
        res('ok')
      })
      p0.then(() => {
        this.capture()
      })

    },
    methods: {
      fuzhi:function(item){
        this.copy(this.url)
      },

      capture() {
        html2canvas(this.$refs.captureArea, {
          useCORS: true,
          scale: 2
        }).then(canvas => {
          this.link = canvas.toDataURL('image/png')
        })
      },

      baocun:function(){
        const xiazai = document.createElement('a')
        xiazai.href = this.link
        xiazai.download = 'screenshot.png'
        xiazai.click()
      }

    }
  }
</script>
<style scoped lang="less">
  /deep/ #erweimadiv{
    img{ width: 6rem;}
  }
</style>
